<template>
  <div class="n-cmt">
    <div class="commo">
      <div class="comtit">
        <h3>评论</h3>
        <span>共{{comcount}}条评论</span>
      </div>
      <div class="commain">
        <div class="iptarea">
          <div class="head">
            <img src="../../assets/image/default_avatar.jpg">
          </div>
          <div class="hflag">
            <div class="shuqu">
              <textarea
                name=""
                id=""
                cols="85"
                rows="10"
                placeholder="评论"
                v-model="comtext"
                @keyup.enter="sendcom(1,2,'')"
              ></textarea>
            </div>
            <div class="combtns">
              <i class="iconfont icon-xiaolian"></i>
              <i class="iconfont icon-aite"></i>
              <a href="#">评论</a>
            </div>
            <div class="corr"></div>
          </div>
        </div>
        <div class="cmmts">
          <h3 v-show="hotcomnum!==0">精彩评论</h3>
          <div
            class="acom"
            v-for="(item,index2) in cominfoshot"
            :key="index2"
          >
            <div class="head">
              <img
                :src="item.user.avatarUrl"
                @click="gouserhome(item.user.userId)"
              >
            </div>
            <div class="cntwrap">
              <div class="usersay">
                <a
                  href="#"
                  @click.prevent="gouserhome(item.user.userId)"
                >{{item.user.nickname}}</a>
                <img src="../../assets/image/vip3.png">
                “{{item.content}}”
              </div>
              <div class="myact">
                <div class="time">{{item.time}}</div>
                <a
                  href="#"
                  @click.prevent="dianzancom(item.commentId,item.index2)"
                  class="zana"
                ><i class="iconfont icon-zan"></i>
                  ({{item.likedCount}})</a>
                <span>|</span>
                <a
                  href="#"
                  @keyup.enter="sendcom(2,2,item.commentId,index2)"
                >回复</a>
              </div>
            </div>
          </div>
          <div class="hui">
            <div class="iner">
              <div class="u-txtwrap">
                <textarea
                  name=""
                  class="txthui"
                  cols="75"
                  rows="2"
                ></textarea>
              </div>
              <div class="combtnss">
                <i class="iconfont icon-lianxiaolianmanyi-"></i>
                <i class="iconfont icon-aite1"></i>
                <a
                  href="#"
                  class="huifu"
                >回复</a>
                <span class="xz">134</span>
              </div>
            </div>
          </div>
          <h3 v-show="newcomnum!==0">最新评论</h3>
          <div
            class="acom"
            v-for="(item,index3) in cominfos"
            :key="'3'+index3"
          >
            <div class="head">
              <img
                :src="item.user.avatarUrl"
                @click.prevent="gouserhome(item.user.userId)"
              >
            </div>
            <div class="cntwrap">
              <div class="usersay">
                <a
                  href="#"
                  @click.prevent="gouserhome(item.user.userId)"
                >{{item.user.nickname}}</a>
                <img src="../../assets/image/vip3.png">
                “{{item.content}}”
              </div>
              <div class="myact">
                <div class="time">{{item.time}}</div>
                <!-- 点赞大拇指 -->
                <a
                  href="#"
                  @click.prevent="dianzancom(item.commentId,index3)"
                  class="zana"
                ><i class="iconfont icon-zan"></i>({{item.likedCount}})</a>
                <span>|</span>
                <a
                  href="#"
                  @keyup.enter="sendcom(2,2,item.commentId,index3)"
                >回复</a>
              </div>
            </div>

            <div class="hui">
              <div class="iner">
                <div class="u-txtwrap">
                  <textarea
                    name=""
                    class="txthui"
                    cols="75"
                    rows="2"
                  ></textarea>
                </div>
                <div class="combtnss">
                  <i class="iconfont icon-lianxiaolianmanyi-"></i>
                  <i class="iconfont icon-aite1"></i>
                  <a
                    href="#"
                    class="huifu"
                  >回复</a>
                  <span class="xz">134</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: ['pid'],
  data () {
    return {
      // 评论
      cominfoshot: [],
      cominfos: [],
      comcount: 0,
      newcomnum: 0,
      hotcomnum: 0,
      comtext: ''
    }
  },
  created () {
    this.getcoms()
  },
  watch: {
    pid (newVal, oldVal) {
      // console.log(newVal, oldVal)
      this.pid = newVal
      // console.log('this.pid', this.pid)
      this.$emit('changeshow', false)
    },
    $route (to, from) {
      // console.log(to.path, from.path)
    }
  },
  methods: {
    // 获取评论
    async getcoms () {
      let res = await axios.get('https://autumnfish.cn//comment/dj?id=' + this.pid)
      this.comcount = res.data.total
      this.cominfoshot = res.data.hotComments
      this.cominfos = res.data.comments
      this.newcomnum = res.data.comments.length
      this.hotcomnum = res.data.hotComments.length
      // console.log(res)
      // bus.$emit('bangInfo', res)
    },
    // 发送评论
    async sendcom (t, type, cmid, index) {
      // 评论
      if (t === 1) {
        let url = 'https://autumnfish.cn//comment?t=' + t + '&type=' + type + '&id=' + this.pid + '&content=' + this.comtext
        // console.log(url)
        let res = await axios.get('https://autumnfish.cn//comment?t=' + t + '&type=' + type + '&id=' + this.pid + '&content=' + this.comtext)
        if (res.data.code === 200) {
          this.$message({
            message: '评论成功',
            type: 'success'
          });
        }
      }
      // 回复
      else {
        // 1、显示回复框
        document.getElementsByClassName('hui')[0].style.display = 'block'
        let a = (index + 1) * 87 + 38
        document.getElementsByClassName('hui')[0].style.top = a + 'px'
        document.getElementsByClassName('')[index].style.paddingBottom = '125px'
        let url = 'https://autumnfish.cn//comment?t=' + t + '&type=' + type + '&id=' + this.pid + '&content=' + this.comtext + '&commentId=' + cmid
        // console.log(url)
        let res = await axios.get('https://autumnfish.cn//comment?t=' + t + '&type=' + type + '&id=' + this.pid + '&content=' + this.comtext + '&commentId=' + cmid)
        // console.log(res)
      }

    },
    // 点赞
    async dianzancom (comid, i) {
      let url = 'https://autumnfish.cn//comment/like?id=' + this.pid + '&cid=' + comid + '&t=' + 1 + '&type=' + 2
      let res = await axios.get(url)
      if (res.data.code === 200) {
        // 点赞成功——》点赞图标变红
        if (this.window.location.href.t == 1) {
          document.getElementsByClassName('zana')[i].style.color = "#be261d"
        }
        else document.getElementsByClassName('zana')[i].style.color = "skyblue"

      }
    },
    gouserhome (id) {
      this.$router.push({ path: '/user', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
// 评论
.n-cmt {
  .commo {
    margin-top: 40px;
    .comtit {
      height: 33px;
      border-bottom: 2px solid #c20c0c;
      display: flex;
      justify-content: left;
      align-items: center;
      h3 {
        font-size: 20px;
        font-weight: normal;
      }
      span {
        margin-left: 20px;
        color: #666;
        font-size: 12px;
      }
    }
    .commain {
      // 评论输入框
      .iptarea {
        margin-bottom: 20px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-top: 20px;
        .head {
          width: 50px;
          height: 50px;
          margin-right: 20px;
          margin-bottom: 35px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .hflag {
          .shuqu {
            padding-right: 14px;
            textarea {
              height: 50px;
              display: block;
              padding: 5px 6px 6px;
              border: 1px solid #cdcdcd;
              border-radius: 2px;
              line-height: 19px;
              box-sizing: content-box;
              resize: none;
              overflow: auto;
              font-size: 12px;
              color: #333;
            }
          }
          .combtns {
            padding: 0 10px;
            padding-top: 10px;
            .iconfont {
              float: left;
              margin: 0px 10px 0 0;
              cursor: pointer;
            }
            a {
              text-decoration: none;
              float: right;
              font-size: 12px;
              display: inline-block;
              width: 46px;
              height: 25px;
              color: #fff;
              background-color: #4391da;
              text-align: center;
              line-height: 25px;
            }
          }
        }
      }
      // 评论区
      .cmmts {
        position: relative;
        overflow: hidden;
        h3 {
          height: 20px;
          border-bottom: 1px solid #cfcfcf;
          font-weight: normal;
          font-size: 14px;
        }
        .acom {
          // height: 70px;
          // position: relative;
          padding: 15px 0;
          border-top: 1px solid #ccc;
          display: flex;
          justify-content: left;
          // align-items: center;
          .head {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .cntwrap {
            width: 100%;
            .usersay {
              width: 100%;
              overflow: hidden;
              line-height: 20px;
              font-size: 12px;
              color: #333;
              a {
                text-decoration: none;
                font-size: 12px;
                margin-right: 5px;
                color: #0c73c2;
              }
              a:hover {
                text-decoration: underline;
              }
              img {
                height: 12px;
                margin-right: 5px;
              }
            }
            .myact {
              margin-top: 15px;
              text-align: right;
              .time {
                font-size: 12px;
                float: left;
                margin: 0 !important;
                color: #999;
              }
              a {
                font-size: 12px;
                text-decoration: none;
                color: #999;
              }
              span {
                margin: 0 8px;
                color: #ccc;
              }
              .iconfont {
                margin-right: 5px;
                vertical-align: -2px;
                font-size: 12px;
                color: skyblue;
              }
            }
          }
        }
        .hui {
          position: absolute;
          left: 0px;
          top: 0px;
          display: none;
          margin-left: 60px;
          margin-bottom: 15px;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          .iner {
            padding: 15px;
            background: #f8f8f8;
            border: 1px solid #fcfcfc;
            border-radius: 2px;
            .u-txtwrap {
              padding-right: 14px;
              .txthui {
                margin: 0;
                padding: 5px 6px 6px;
                border: 1px solid #cdcdcd;
                border-radius: 2px;
                line-height: 19px;
                box-sizing: content-box;
                height: 20px;
              }
            }
            .combtnss {
              width: 530px;
              height: 22px;
              padding-top: 10px;
              .iconfont {
                float: left;
                margin: 0px 10px 0 0;
                cursor: pointer;
                font-size: 20px;
              }
              .huifu {
                text-decoration: none;
                display: inline-block;
                width: 46px;
                height: 25px;
                float: right;
                background-color: #3282ce;
                color: #fff;
                text-align: center;
                line-height: 25px;
                font-size: 12px;
              }
              .xz {
                font-size: 12px;
                float: right;
                margin-right: 10px;
                line-height: 25px;
                color: #999;
              }
            }
          }
        }
      }
      // 页数
      .j-flag {
      }
    }
  }
}
</style>
